<template>
	<div :class="isDesktop ? 'flex gap-[10px]' : ''">
		<div class="h-22 basis-1/3 pl-[30px] rounded bg-bg-1 flex items-center cursor-pointer">
			<base-image src="race/bonus"></base-image>
			<div class="ml-5">
				<div class="flex items-center mb-3">
					<base-icon name="statistics"></base-icon>
					<div class="ml-1 text-t-1">{{ $t('race.title-prize') }}</div>
				</div>
				<div class="flex text-warning text-[20px]">
					$
					<up-amount
						:currency="Currency.us"
						:value="betContestBoundsData?.totalPrizes"
						currencyClass="!w-5"
						class="text-warning text-[20px]"></up-amount>
				</div>
			</div>
		</div>
		<div
			class="h-22 basis-1/3 pl-[30px] rounded bg-bg-1 flex items-center"
			:class="{ 'mt-2': !isDesktop }">
			<base-image src="race/flag"></base-image>
			<div class="ml-5">
				<div class="flex items-center">
					<base-icon name="race" class="text-success"></base-icon>
					<div class="ml-1 text-t-1 tabular-nums">{{ countdownText }}</div>
				</div>
				<div class="mt-3 h-5 flex items-center">
					<base-icon name="zd-super" class="text-warning"></base-icon>
					<div class="ml-1 text-t-2 cursor-pointer" @click="lastShow = true">
						{{ $t('race.lastRace') }}
					</div>
				</div>
			</div>
		</div>
		<div
			class="h-22 basis-1/3 pl-[30px] rounded bg-bg-1 flex items-center"
			:class="{ 'mt-2': !isDesktop }">
			<account-avatar :data="profileStore.userInfo?.avatar" :width="50" class="relative -top-1" />
			<div class="ml-5 flex-1 flex" v-if="accountStore.isLogin">
				<div class="basis-1/2">
					<div class="mb-3 text-t-2">{{ $t('race.myRank') }}</div>
					<div class="text-t-1">{{ betContestMineData?.weeklyRank + 1 || '-' }}</div>
				</div>
				<div class="">
					<div class="mb-3 text-t-2">{{ $t('race.amount') }}</div>
					<up-amount
						:currency="Currency.us"
						:value="betContestMineData?.totalBetAmount || 0"
						class="text-t-1"></up-amount>
				</div>
			</div>
			<base-button
				v-else
				type="primary"
				:block="false"
				size="small"
				class="ml-5"
				@click="accountStore.showLogin()">
				{{ $t('race.join') }}
			</base-button>
		</div>
	</div>
	<race-last v-model="lastShow" :data="betContestPrevData?.weeklyContestVO" />
</template>

<script setup lang="ts">
import RaceLast from './race-last.vue'
import { BaseImage, BaseIcon, BaseButton } from '@/components/base'
import { UpAmount } from '@/components/up'
import { AccountAvatar } from '@/components/account/'
import { RaceInfo, RaceItem } from '@/types'
import { PropType, computed, watch, ref, onBeforeUnmount, onMounted } from 'vue'
import { useProfileStore, useAccountStore, useCasinoStore } from '@/store'
import { getLeftDateArr } from '@/utils'
import { Currency } from '@/enums'
import { useCountdown } from '@/hooks'
// import { startOfWeek, add } from 'date-fns'
import { useRequest, isDesktop } from '@/hooks'
import { getBetContestMine, getBetContestPrev, getBetContestBounds } from '@/api/other.ts'

const props = defineProps({
	data: {
		type: Object as PropType<RaceInfo | null>,
		default: null
	},
	list: {
		type: Array<RaceItem>,
		default: () => []
	}
})

//const appStore = useAppStore()
const profileStore = useProfileStore()
const accountStore = useAccountStore()

const { countdown, reset } = useCountdown()

const lastShow = ref(false)
const getCountdownFn = () => {
	const endTime = betContestPrevData.value.currentContestRoundVO.end
	//const lastWeekDate = add(startOfWeek(new Date()), { days: 7 }).getTime()
	const remainingSeconds = Math.max(Number(((endTime - Date.now()) / 1000).toFixed()), 0)
	reset(remainingSeconds)
}
// const title = computed(() => {
// 	if (props.data?.title) {
// 		const item = getItemById<RaceTitle>(props.data?.title, appStore.lang)
// 		return item?.name
// 	}
// 	return ''
// })

const countdownText = computed(() => {
	let res = ''
	if (countdown.value) {
		const { d, h, m, s } = getLeftDateArr(countdown.value * 1000)
		if (d) {
			res += d + 'd: '
		}
		if (d || h) {
			res += h.toString().padStart(2, '0') + 'h: '
		}
		if (d || h || m) {
			res += m.toString().padStart(2, '0') + 'm: '
		}
		if (d || h || m || s) {
			res += s.toString().padStart(2, '0') + 's'
		}
	}
	return res
})

let timer: any
const casinoStore = useCasinoStore()

const updateMyRank = (val: any) => {
	betContestMineData.value = val
}

// watch(
// 	() => props.data,
// 	(val) => {
// 		if (val) {
// 			myRank.value = val.myRank
// 			betAmount.value = val.betAmount
// 		}
// 		if (val?.remainMil) {
// 			reset(val.remainMil / 1000)
// 		}
// 	}
// )

watch(
	() => [accountStore.isLogin, props.list],
	() => {
		getDataMine()
	}
)
watch(
	// @ts-ignore
	() => casinoStore.weeklyRaceData,
	(data) => {
		if (accountStore.isLogin) {
			updateMyRank(data)
		}
	}
)
const { run: runBetContestMine, data: betContestMineData } = useRequest<any>(getBetContestMine)
const { run: runBetContestPrev, data: betContestPrevData } = useRequest<any>(getBetContestPrev)
const { run: runBetContestBounds, data: betContestBoundsData } =
	useRequest<any>(getBetContestBounds)
const getDataMine = async (refresh?: boolean) => {
	await runBetContestMine({ refresh })
}
const getDataPrev = async (refresh?: boolean) => {
	await runBetContestPrev({ refresh })
	getCountdownFn()
}
const getDataBounds = async (refresh?: boolean) => {
	await runBetContestBounds({ refresh })
}
onMounted(() => {
	getDataMine()
	getDataPrev()
	getDataBounds()
})
onBeforeUnmount(() => {
	timer && clearTimeout(timer)
})
</script>
